<template>
	<view class="container">
		<view class="top">
			<view class="icon">
				<image :src="movie.thumbnail | urlFormat" mode="aspectFit"></image>
			</view>
			<view class="detail">
				<text v-if="movie.name"><text class="name">名称：</text>{{ movie.name}}</text>
				<!-- <text><text class="name">导演：</text>弗兰克·德拉邦特</text>
				<text><text class="name">编剧：</text>弗兰克·德拉邦特 / 斯蒂芬·金</text>
				<text><text class="name">主演：</text>蒂姆·罗宾斯 / 摩根·弗里曼 / 鲍勃·冈顿 / 威廉姆·赛德勒 / 克兰西·布朗 / 吉尔·贝罗斯 / 马克·罗斯顿 / 詹姆斯·惠特摩 / 杰弗里·德曼 / 拉里·布兰登伯格 / 尼尔·吉恩托利 / 布赖恩·利比 / 大卫·普罗瓦尔 / 约瑟夫·劳格诺 / 祖德·塞克利拉 / 保罗·麦克兰尼 / 芮妮·布莱恩 / 阿方索·弗里曼 / V·J·福斯特 / 弗兰克·梅德拉诺 / 马克·迈尔斯 / 尼尔·萨默斯 / 耐德·巴拉米 / 布赖恩·戴拉特 / 唐·麦克马纳斯</text> -->
				<text v-if="movie.type"><text class="name">类型：</text>{{ movie.type}}</text>
				<text v-if="movie.region"><text class="name">地区：</text>{{ movie.region}}</text>
				<text v-if="movie.language"><text class="name">语言：</text>{{ movie.language}}</text>
				<text v-if="movie.date"><text class="name">日期：</text>{{ movie.date}}</text>
				<text v-if="movie.duration"><text class="name">片长：</text>{{ movie.duration}}</text>
				<!-- <text v-if="movie.alias"><text class="name">又名：</text>{{ movie.alias}}</text> -->
				<text v-if="movie.imdb"><text class="name">imdb：</text>{{ movie.imdb}}</text>
			</view>
		</view>
		<view class="middle">
			<view class="title">
				剧情简介：
			</view>
			<view class="desc">
				　　<rich-text :nodes="movie.film"></rich-text>
			</view>
			<view class="operator">
				<view class="code" v-if="!this.$store.getters.login">登录后查看</view>
				<view v-else>
					<view v-if="movie.res_net && movie.res_code">
						<view class="name">百度网盘：</view>
						<view class="link">链&nbsp;&nbsp;&nbsp;接：http://www.baidu.comhttp://www.baidu.comhttp://www.baidu.com <text class="btn">复制</text></view>
						<view class="code">提取码：wdfd <text class="btn">复制</text></view>
					</view>
					<view class="code" v-else>暂无资源</view>
				</view>
			</view>
		</view>
		<!-- <view class="bottom">
			<view @click="collection">
				<text class="iconfont icon-shoucang"></text>
				<text>收藏</text>
			</view>
			<view>
				<text class="iconfont icon-31fenxiang"></text>
				<text @click="share">分享</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				movie:{
					thumbnail:'',
					name:'怦然心动',
					type:'剧情 / 犯罪',
					region:'美国',
					language:'英语',
					date:'1994-09-10(多伦多电影节) / 1994-10-14(美国)',
					duration:'142分钟',
					alias:'月黑高飞(港) / 刺激1995(台) / 地狱诺言 / 铁窗岁月 / 消香克的救赎',
					imdb:'tt0111161',
					film: `"一场谋杀案使银行家安迪（蒂姆•罗宾斯 Tim Robbins 饰）蒙冤入狱，谋杀妻子及其情人的指控将囚禁他终生。"`,
					res_net:'',
					res_code:'',
				}
			};
		},
		onLoad(e) {
			if(!e.id){
				return uni.redirectTo({
					url:"/pages/index/index"
				});
			}
			this.$http.httpReq({url:'api/index/detail',data:{id:e.id}})
				.then(res=>{
					let data = res.data.data;
					if(res.data.code==400){
						return uni.redirectTo({
							url:"/pages/index/index"
						});
					}
					this.movie = data.movie;
				})
				.catch(err=>{
					console.log(err);
				})
		},
		methods: {
			collection() {
				uni.showModal({
					title: "温馨提示",
					content:"去登陆",
					showCancel: true,
					// confirmText:"登录",
					// cancelText:"取消",
					success: res=> {
						// 页面跳转（上一页）
						console.log(res);
						if(res.confirm){
							return uni.navigateTo({
								url:"/pages/my/auth"
							})	
						}else{
							return uni.hideLoading();
						}
					}
				})
			},
			share() {
				uni.showModal({
					title: "温馨提示",
					content:"去登陆",
					showCancel: true,
					// confirmText:"登录",
					// cancelText:"取消",
					success: res=> {
						// 页面跳转（上一页）
						console.log(res);
						if(res.confirm){
							return uni.navigateTo({
								url:"/pages/my/auth"
							})	
						}else{
							return uni.hideLoading();
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f0f0f0;
	}
	.container{
		.top{
			padding: 10rpx 20rpx;
			background-color: #FFFFFF;
			display: flex;
			.icon{
				width: 350rpx;
				height: 350rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.detail{
				// padding: 20rpx 0;
				max-width: 400rpx;
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				text{
					.name{
						font-weight: bolder;
						font-size: 28rpx;
					}
					// height: 40rpx;
					line-height: 40rpx;
				}
			}
		}
		.middle{
			padding: 10rpx 20rpx;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: #FFFFFF;
			.title{
				// text-indent: 2rem;
				color: #06bf12;
				font-weight: bolder;
				font-size: 50rpx;
				padding: 20rpx 20rpx;
			}
			.desc{
				font-size: 28rpx;
				line-height: 40rpx;
				// text-indent: 2rem;	
				padding: 0 20rpx;
			}
			.operator{
				// margin-top: 20rpx;
				padding: 20rpx 10rpx;
				background-color: #FFFFFF;
				font-size: 28rpx;
				line-height: 40rpx;
				word-wrap: break-word;
				.name{
					font-weight: bolder;
					padding-bottom: 10rpx;
				}
				.code{
					font-weight: bolder;
					padding-bottom: 100rpx;
				}
				.btn{
					color: #06bf12;
					font-size: 22rpx;
					padding: 0 10rpx;
					font-weight: bolder;
				}
			}
		}
		.bottom{
			position: fixed;
			bottom: 0rpx;
			height: 100rpx;
			line-height: 40rpx;
			display: flex;
			text-align: center;
			justify-content: center;
			width: 100%;
			margin: 0 auto;
			color: #ffffff;
			font-size: 30rpx;
			background-color: #06bf12;
			view{
				width: 50%;
				display: flex;
				padding: 15rpx;
				flex-direction: column;
				&:active{
					color: grey;
				}
				&:first-child{
					border-right: 5rpx solid #ffffff;
				}
			}
		}
	}
</style>
